<template>
  <div>
    <el-form
      ref="serverForm"
      :model="serverForm"
      label-width="120px"
      :rules="serverRules"
    >
      <el-form-item label="服务器类型:">
        <template>
          <el-radio-group v-model="serverForm.type" @change="changeType">
            <el-radio :label="1">本地服务器</el-radio>
            <!-- <el-radio :label="2">自定义服务器</el-radio> -->
          </el-radio-group>
        </template>
      </el-form-item>
      <div v-if="serverForm.type == 2">
        <el-form-item label="服务器IP地址:" prop="server_ip">
          <el-input v-model="serverForm.server_ip" />
        </el-form-item>
        <el-form-item label="服务器账号:" prop="ssh_account">
          <el-input v-model="serverForm.ssh_account" />
        </el-form-item>
        <el-form-item label="服务器密码:" prop="ssh_password">
          <el-input v-model="serverForm.ssh_password" />
        </el-form-item>
        <el-form-item label="服务器端口:" prop="ssh_port">
          <el-input v-model="serverForm.ssh_port" />
        </el-form-item>
        <el-form-item label="服务器根路径:" prop="root_path">
          <el-input v-model="serverForm.root_path" />
        </el-form-item>
      </div>
      <el-form-item>
        <el-button class="save" type="primary" size="small" @click="save">保存</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import serverApi from '@/api/websetting'
export default {
  props: ['websiteId'],
  data() {
    return {
      serverForm: {
        id: '',
        websiteId: '',
        type: '',
        server_ip: '',
        ssh_account: '',
        ssh_password: '',
        ssh_port: '',
        // sort: '',
        // status: '',
        root_path: ''

      },
      serverRules: {
        type: [
          { required: 'true', message: '请选择服务器类型', trigger: 'change' }
        ],
        server_ip: [
          { required: 'true', message: '请输入服务器IP地址', trigger: 'blur' }
        ],
        ssh_account: [
          { required: 'true', message: '请输入服务器账号', trigger: 'blur' }
        ],
        ssh_password: [
          { required: 'true', message: '请输入服务器密码', trigger: 'blur' }
        ],
        ssh_port: [
          { required: 'true', message: '请输入服务端口号', trigger: 'blur' }
        ],
        root_path: [
          { required: 'true', message: '请输入服务器根路径', trigger: 'blur' }
        ]
      },
      siteId: ''
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val
    }
  },
  created() {
    this.siteId = this.$store.getters.siteId
    this.getServerInfo()
  },
  methods: {
    // 切换服务器类型
    changeType(val) {
      this.serverForm.type = val
    },
    // 服务器详情
    getServerInfo() {
      serverApi.serverInfo({ site_id: this.siteId }).then(res => {
        this.serverForm = res.data
        this.serverForm.ssh_port = this.serverForm.ssh_port + ''
      })
    },
    // 服务器编辑
    save() {
      this.$refs.serverForm.validate((valid) => {
        if (valid) {
          let val = {
            id: this.serverForm.id,
            type: this.serverForm.type,
            website_id: this.serverForm.website_id,
            server_ip: this.serverForm.server_ip,
            ssh_account: this.serverForm.ssh_account,
            ssh_password: this.serverForm.ssh_password,
            ssh_port: this.serverForm.ssh_port,
            root_path: this.serverForm.root_path
          }
          if (this.serverForm.type == 1) {
            val = {
              id: this.serverForm.id,
              type: this.serverForm.type,
              website_id: this.serverForm.website_id
            }
          }

          serverApi.serverUpdate(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getServerInfo()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
